<template>
    <div class="user-info">
        <div class="article-slide">
            <div class="article-img">
                <img style="width: 100%; height: 100%" :src="avator"  alt="牛回速归"/>
            </div>
            <ul class="article-info">
                <li class="article-info-item">昵称: &nbsp;&nbsp; {{ name }}</li>
                <li class="article-info-item">邮箱： {{ email }}</li>
            </ul>
        </div>
        <div class="article-content">
            <div class="article-title">个性签名：{{ introduction }}</div>
        </div>
    </div>
</template>

<script>
import { mixin } from "@/mixins";
import { mapGetters } from "vuex";
import { getUserInfo } from "../api/index";

export default {
    name: "user-info",
    mixins: [mixin],
    components: {},
    data() {
        return {
            avator: "", // 用户头像
            name: "", // 昵称
            email: "", // 邮箱
            introduction: "", // 签名
        };
    },
    computed: {
        ...mapGetters([
            "userId", // 当前登录用户id
        ]),
    },
    mounted() {
        this.getMsg();
    },
    methods: {
        /**
         * 获取当前登录的用户信息
         */
        getMsg() {
            getUserInfo()
                .then((res) => {
                    this.avator = res.data.avatar;
                    this.name = res.data.name;
                    this.email = res.data.email;
                    this.introduction = res.data.introduction;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/user-info.scss";
</style>
